/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState } from 'react';
import './search.css'
import { Form, Row, Col, Input, Button, Select, Radio, Table } from 'antd';
// import { DownOutlined, UpOutlined } from '@ant-design/icons';
const { Option } = Select;

export default function Search() {
    const data = [
        {
            key: '1',
            name: 'John Brown',
            sex: '男',
            touch: '是',
        },
        {
            key: '2',
            name: 'Jim Green',
            sex: '女',
            touch: '是',
        },
        {
            key: '3',
            name: 'Joe Black',
            sex: '男',
            touch: '否',
        },
    ];
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '性别',
            dataIndex: 'sex',
        },
        {
            title: '是否接触过前端',
            dataIndex: 'touch',
        },
    ];

    const [form] = Form.useForm();
    const [newData, setNewData] = useState(data)

    const getFields = () => {
        const count = 2;
        const children = [];

        for (let i = 0; i < count; i++) {
            children.push(
                <Col span={8} key={i}>
                    <Form.Item
                        name={i === 0 ? `name` : `sex`}
                        label={i === 0 ? `姓名` : `性别`}
                        rules={[
                            {
                                // required: true,
                                // message: 'Input something!',
                            },
                        ]}
                    >
                        {i % 3 !== 1 ? (
                            <Input placeholder="placeholder" />
                        ) : (
                            <Select >
                                <Option value="1">男</Option>
                                <Option value="2">女</Option>
                            </Select>
                        )}
                    </Form.Item>
                </Col>,
                < >
                {i === 1 ? <Col span={8} key={3} style={{marginTop: '5px'}}>
                        <span>是否接触过前端</span>
                        <Radio.Group onChange={onChange} value={value} >
                            <Radio value={1}>是</Radio>
                            <Radio value={0}>否</Radio>
                        </Radio.Group></Col> : ''}
                    
                </>
            );
        }

        return children;
    };

    const onFinish = (values) => {
        console.log('Received values of form: ', values);
        // console.log(values.name)
        
        if (values.sex===undefined) {
            const sexData=newData.filter((e) => e.name === values.name)
            setNewData(sexData);
        } else if (values.name===undefined) {
            console.log(values.sex)
            const nameData=newData.filter((e) => e.sex === (values.sex==='1'?'男':'女'));
            console.log(nameData)
            setNewData(nameData);
        }
        else if(values.sex===undefined&&values.name===undefined){setNewData('')}
        setNewData(newData.filter((e) => e.name===values.name&&values.sex==='1'?'男':'女'));
    };

    const [value, setValue] = React.useState(1);

    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };

    return (
        <div>
            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}
            >
                <Row gutter={16}>{getFields()}</Row>

                <Row>
                    <Col
                        span={24}
                        style={{
                            textAlign: 'right',
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button
                            style={{
                                margin: '0 8px',
                            }}
                            onClick={() => {
                                form.resetFields();
                            }}
                        >
                            重置
                        </Button>
                    </Col>
                </Row>
            </Form>
            <Table columns={columns} dataSource={newData} size="middle" />
        </div>
    )
}
